import type { Metadata } from "next";
import "./globals.css";
import ReactQueryProvider from "@/components/providers/react-query-provider";
import { Toaster } from "@/components/ui/sonner";
import { Suspense } from "react";
import { LoaderIcon } from "lucide-react";
import { NextIntlClientProvider } from 'next-intl';
import { getLocale, getMessages } from 'next-intl/server';

export const metadata: Metadata = {
  title: "X Flow",
  description: "X Flow - Your workflow, built by you",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = await getLocale();
  const messages = await getMessages();
  return (
    <html lang={locale}>
      <body className="antialiased flex w-full h-full">
        <NextIntlClientProvider locale={locale} messages={messages}>
          <Suspense fallback={<div className="w-full h-screen flex justify-center items-center"><LoaderIcon className="animate-spin" /></div>}>
            <Toaster />
            <ReactQueryProvider>
              {children}
            </ReactQueryProvider>
          </Suspense>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
